/* min-width has been changed from 450px to 320px */
@media all and (min-width: 320px){
	.ui-controlgroup-label { vertical-align: top; display: inline-block;  width: 20%;  margin: 0 2% 0 0;  }
	.ui-controlgroup-controls { width: 60%; display: inline-block; }
}

/* min-width has been changed from 450px to 320px */
@media all and (min-width: 320px){
	.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
}

/* min-width has been changed from 450px to 320px */
@media all and (min-width: 320px){
	label.ui-select { display: inline-block;  width: 20%;  margin: 0 2% 0 0; }
	.ui-select { width: 60%; display: inline-block; }
}	

/* min-width has been changed from 450px to 320px */
@media all and (min-width: 320px){
	label.ui-input-text  { vertical-align: top; display: inline-block;  width: 20%;  margin: 0 2% 0 0 }
	input.ui-input-text, 
	textarea.ui-input-text, 
	.ui-input-search { width: 60%; display: inline-block; }
	.ui-input-search { width: 50%; }
	.ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
}

/* fields placement fix, because min-width has been changed from 450px to 320px */
@media all and (min-width: 320px){
    .ui-controlgroup-controls,
    .ui-select,
    input.ui-input-text,
    textarea.ui-input-text,
    .ui-input-search { margin-left: 20px; }
}

/* fix for https://www.pivotaltracker.com/story/show/19794687 */
@media all and (min-width: 320px){
    .ui-content ul li div.itemLabel {
        float: left;  /* float the label left, rather than floating the item right */
        width: 40%;   /* A width MUST be specified when floating. */
    }

    .ui-content ul li div.itemValue {
        width: 60%;
        float: none;            /* Un-do the default float */
        word-wrap: break-word;  /* breaks-up long strings with no spaces */
    }
}
